<template>
  <div class="home">
    <img src="../assets/title.png" alt="" class="title">
    <img src="../assets/rabbit.png" alt="" class="rabbit">
    <div class="bowl-container" @click="handleStart" id="bowl">
      <div class="dice dice4 dice-position1"></div>
      <div class="dice dice4 dice-position2"></div>
      <div class="dice dice1 dice-position3"></div>
      <div class="dice dice1 dice-position4"></div>
      <div class="dice dice4 dice-position5"></div>
      <div class="dice dice4 dice-position6"></div>
    </div>
    <div class="tip-container">点击博饼碗参与博饼</div>
    <div class="btn-rule" @click="go2Rule"></div>
  </div>
</template>

<script>
import Game from '../common/game.js'
import $ from 'jquery'
export default {
  name: 'Home',
  components: {
  },
  data() {
    return {
      result: [],
      rank: -1,
      awardTitle: '',
      game: new Game(),
      loading: false
    }
  },
  methods: {
    handleStart () {
      if (this.loading) {
        return
      }
      const res = this.game.generateResult()
      this.result = res.result
      this.rank = res.rank
      this.awardTitle = res.awardTitle
      this.setDice()
    },
    // 获取六个骰子的位置
    getPosition () {
      const positions = [1, 2, 3, 4, 5, 6, 7, 8]
      let res = []
      for (let i = 0; i < 6; i++) {
        res.push(positions.splice(Math.floor(Math.random() * positions.length), 1)[0])
      }
      return res
    },
    setDice () {
      this.loading = true
      $('#bowl').removeClass('active')
      $('#bowl').addClass('inactive')
      const positions = this.getPosition()
      $.each($('#bowl .dice'), (index, item) => {
        $(item).removeClass()
        $(item).addClass(`dice dice${this.result[index]} dice-position${positions[index]}`)
      })
      setTimeout(() => {
        $('#bowl').removeClass('inactive')
        $('#bowl').addClass('active')
        this.showAwardTitle()
      }, 200)
    },
    showAwardTitle () {
      setTimeout(() => {
        this.loading = false
        alert(this.awardTitle)
      }, 1200)
    },
    go2Rule () {
      this.$router.push({
        name: 'Rule'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../styles/animation.scss";

.home {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: url("../assets/bg.png") no-repeat;
  background-size: cover;
  .title {
    width: 500px;
    position: absolute;
    top: 150px;
    left: 50%;
    transform: translateX(-50%);
  }
  .rabbit {
    width: 300px;
    position: absolute;
    top: 400px;
    left: 0;
  }
  .bowl-container {
    width: 550px;
    height: 460px;
    position: absolute;
    bottom: 250px;
    left: 50%;
    transform: translateX(-50%);
    background: url("../assets/bowl.png") no-repeat;
    background-size: cover;
    .dice {
      width: 80px;
      height: 80px;
      position: absolute;
      &.dice1 {
        background: url("../assets/dice_1.png") no-repeat;
        background-size: cover;
      }
      &.dice2 {
        background: url("../assets/dice_2.png") no-repeat;
        background-size: cover;
      }
      &.dice3 {
        background: url("../assets/dice_3.png") no-repeat;
        background-size: cover;
      }
      &.dice4 {
        background: url("../assets/dice_4.png") no-repeat;
        background-size: cover;
      }
      &.dice5 {
        background: url("../assets/dice_5.png") no-repeat;
        background-size: cover;
      }
      &.dice6 {
        background: url("../assets/dice_6.png") no-repeat;
        background-size: cover;
      }
      &.dice-position1 {
        top: 150px;
        left: 150px;
      }
      &.dice-position2 {
        top: 250px;
        left: 140px;
      }
      &.dice-position3 {
        top: 300px;
        left: 220px;
      }
      &.dice-position4 {
        top: 290px;
        left: 310px;
      }
      &.dice-position5 {
        top: 160px;
        left: 330px;
      }
      &.dice-position6 {
        top: 140px;
        left: 250px;
      }
      &.dice-position7 {
        top: 230px;
        left: 230px;
      }
      &.dice-position8 {
        top: 220px;
        left: 300px;
      }
    }
    &.active {
      .dice {
        display: block;
        &.dice-position1 {
          animation: diceAnimation 1s cubic-bezier(0.39, 0.12, 0.85, 0.48);
        }
        &.dice-position2 {
          animation: diceAnimation2 800ms cubic-bezier(0.39, 0.12, 0.85, 0.48);
        }
        &.dice-position3 {
          animation: diceAnimation3 600ms cubic-bezier(0.39, 0.12, 0.85, 0.48);
        }
        &.dice-position4 {
          animation: diceAnimation 750ms cubic-bezier(0.39, 0.12, 0.85, 0.48);
        }
        &.dice-position5 {
          animation: diceAnimation2 500ms cubic-bezier(0.39, 0.12, 0.85, 0.48);
        }
        &.dice-position6 {
          animation: diceAnimation3 678ms cubic-bezier(0.39, 0.12, 0.85, 0.48);
        }
        &.dice-position7 {
          animation: diceAnimation3 800ms cubic-bezier(0.39, 0.12, 0.85, 0.48);
        }
        &.dice-position8 {
          animation: diceAnimation 800ms cubic-bezier(0.39, 0.12, 0.85, 0.48);
        }
      }
    }
    &.inactive {
      .dice {
        display: none;
      }
    }
  }
  .tip-container {
    width: 50px;
    height: 300px;
    border-radius: 10px 0 0 10px;
    position: absolute;
    right: 0;
    bottom: 330px;
    background: #A72A2A;
    color: #FEE7BD;
    font-size: 24px;
    text-align: center;
    writing-mode: tb-rl;
    line-height: 50px;
  }
  .btn-rule {
    width: 400px;
    height: 86px;
    position: absolute;
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%);
    background: url("../assets/btn_rule.png") no-repeat;
    background-size: cover;
  }
}
</style>
